<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>找回密码</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/header.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/forgetPwd.css" />
		<link rel="stylesheet" type="text/css" href="../css/alert.css" />
	</head>

	<body>
		<div class="login" id="login">
			<div class="headerCon">
				<div class="header">
					<div class="logo">
						<a href="../index.html"><img src="../img/index/logo.png" /></a>
					</div>
				</div>
			</div>
			<div class="banner">
				<div class="container">
					<div class="content">
						<div class="title">
							<p class="active">找回密码</p>
						</div>
						<div class="err" v-if="isError"><img src="../img/icon/err.png" />{{errMsg}}</div>
						<div v-if="!isShow">

							<div class="inputs">
								<label for="phone"><img src="../img/icon/phone.png"/></label>
								<input type="text" placeholder="请输入手机号码" v-model="mobile" maxlength="11" />
							</div>
							<div class="msgs">
								<input type="text" placeholder="请输入验证码" v-model="code" maxlength="6" />
								<span v-on:click="getCode" :class="{active:time<60}">{{msg}}</span>
							</div>
							<p class="btns" v-on:click="next">下一步</p>
						</div>
						<div v-if="isShow">
							<div class="inputs pwdInput">
								<label for="phone"><img src="../img/icon/pwd.png"/></label>
								<input type="password" value="" placeholder="请输入密码" v-model="password" maxlength="16" />
							</div>
							<div class="inputs pwdInput">
								<label for="phone"><img src="../img/icon/pwd.png"/></label>
								<input type="password" value="" placeholder="请输入再次密码" v-model="confirmPwd" maxlength="16" />
							</div>
							<p class="btns" v-on:click="toForget">确认找回</p>
						</div>

						<p class="txt">
							<span v-if="isShow" v-on:click="previous">上一步</span><span>已有账号，
							<a href="login.html">马上登录</a></span>
						</p>
					</div>

				</div>

			</div>
			<div id="page1"></div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
	<script src="../js/alert.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/axios.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#page1").load("../publicView/footer.html");
		})
	</script>
	<script type="text/javascript">
		var M={}
		new Vue({
			el: '#login',
			data: {
				isShow: false,
				mobile: "",
				password: "",
				confirmPwd: "",
				code: "",
				isError: false,
				errMsg: "",
				msg: "获取验证码",
				time: 60,
				key: false,
			},
			methods: {
				toast(str) {
					if(M.dialog1) {
						return M.dialog1.show();
					}
					M.dialog1 = jqueryAlert({
						'content': str,
						'closeTime': 2000,
					})
				},
				showErr(str) {
					this.isError = true;
					this.errMsg = str;
				},
				previous() {
					this.isShow = false
				},
				getCode() {
					var that = this;
					if(!this.key) {
						this.key = true;
						if(!this.mobile) {
							this.showErr("请输入正确的手机号")
							return;
						}
						if(!(/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(this.mobile))) {
							this.showErr("请输入正确的手机号格式")
							return;
						}
						var datas = {
							mobile: this.mobile,
							type: 2,
						}
						//that.timeDown();
						getAjax("post", "/api/app/sendMsg/getVerifyMsg", datas).then(res => {
							if(res.code != 0) {
								this.showErr(res.msg)
								this.key = false;
							} else {
								that.timeDown();
							}

						})
					}
				},
				//倒计时
				timeDown() {
					var that = this;
					var msgTime = null;
					// 点击获取验证码后显示倒计时
					if(this.time == 0) {
						clearInterval(msgTime);
						this.key = false;
						this.time = 60;
						this.msg = "重新获取";
					} else {
						that.time--;
						this.msg = that.time + "(s)"
						msgTime = setTimeout(function() {
							that.timeDown();
						}, 1000);
					}
				},
				//下一步
				next() {
					var that = this;
					if(!this.mobile) {
						this.showErr("请输入正确的手机号")
						return;
					}
					if(!(/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(this.mobile))) {
						this.showErr("请输入正确的手机号格式")
						return;
					}
					if(!(/^\d{6}$/.test(this.code))) {
						this.showErr("请输入正确的短信验证码")
						return;
					}
					this.isShow = true
				},
				toForget() {
					var that = this;
					//					if(!this.mobile) {
					//						this.showErr("请输入正确的手机号")
					//						return;
					//					}
					//					if(!(/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(this.mobile))) {
					//						this.showErr("请输入正确的手机号格式")
					//						return;
					//					}
					//					if(!(/^\d{6}$/.test(this.code))) {
					//							this.showErr("请输入正确的短信验证码")
					//							return;
					//					}
					if(!this.password) {
						this.showErr("请输入正确的登录密码")
						return;
					}
					if(!(/^[\w]{6,12}$/.test(this.password))) {
						this.showErr("密码格式为6-16位字符")
						return;
					}
					if(this.password != this.confirmPwd) {
						this.showErr("输入两次密码不一致")
						return;
					}
					var datas = {
						mobile: this.mobile,
						code: this.code,
						password: this.password,
						confirmPwd: this.password,
					}
					getAjax("post", "/api/app/user/forgetPwd", datas).then(res => {
						console.log(res)
						if(res.code != 0) {
							this.showErr(res.msg)
						} else {
							this.toast("找回密码成功");
							setTimeout(function(){
								window.location.href="login.html"
							},2000)
							
						}
					});

				}

			}
		})
	</script>

</html>